昨天我們介紹了props的用法，要注意的是，props是單向數據流，所以只能從上傳到下，要由下傳到上的話要使用$emit自訂事件。

<template>
  <div id="app">
    <eventComponent @my-event="action"></eventComponent>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    action(value) {
      alert(value);
    },
  },
  components: {
    eventComponent: {
      template: `
        <div>
          <button @click="onClick">button</button>
        </div>
      `,
      methods: {
        onClick() {
          this.$emit("my-event", "123");
        },
      },
    },
  },
};
</script>

我們先建立一個元件eventComponent，偵聽button的click事件並綁定methods裡的onClick方法，而這個方法透過$emit發出一個名為my-event的事件，在HTML模板使用v-on:事件名稱去接收事件後，執行Vue實例內的function。
如此一來，我們可以自己定義事件內容，看是要觸發甚麼類型的行為等等。

按下button後，便把"123"傳入alert中。
成果:

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#